<template>
  <view class="container create_channel">
    <view class="zs_section_title">基础信息</view>
    <tm-sheet :margin="[24, 20]" :round="3" :shadow="2">
      <view class="form_container">
        <view class="view_form_item">
          <view class="view_item_label"><text class="zs_form_required">*</text>类型渠道</view>
          <view class="view_item_value view_item_select" @click="showChannelType">
            <view v-if="form.type" style="padding-right:10px;">{{form.type_text}}</view>
            <view v-else style="color: #999999;padding-right:10px;">请选择</view>
            <tm-icon fontSize="24" name="iconfont icon-youjiantou"></tm-icon>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">主体</view>
          <view class="view_item_value">
            <view class="form_item_tag">
              <view v-for="(item, i) in entityOptions" :class="['zk_item_tag', item.value === form.entity ? 'selected' : '' ]" :key="i" @click="() => selectEntity(item)">{{item.label}}</view>
            </view>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">渠道方</view>
          <view class="view_item_value">
            <u-input v-model="form.name" maxlength="18" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">收款账户</view>
          <view class="view_item_value">
            <u-input v-model="form.bank_account_name" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">开户行</view>
          <view class="view_item_value">
            <u-input v-model="form.bank_name" placeholder="请输入" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">银行账号</view>
          <view class="view_item_value">
            <u-input v-model="form.bank_account" placeholder="请输入"  maxlength="20" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">纳税人识别号</view>
          <view class="view_item_value">
            <u-input v-model="form.social" placeholder="请输入"  maxlength="20" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">通讯地址</view>
          <view class="view_item_value">
            <u-input v-model="form.address" placeholder="请输入"  maxlength="40" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
          </view>
        </view>
        <view class="view_form_item">
          <view class="view_item_label">备注</view>
          <view class="view_item_value">
            <u-input v-model="form.remark" placeholder="请输入"  maxlength="40" border="none" inputAlign="right" color="#333333" placeholderStyle="color:#999999;"></u-input>
          </view>
        </view>
      </view>
    </tm-sheet>
    <view class="cus_footer_btn">
      <up-button type="primary" :disabled="!form.type" shape="circle" text="提交" @click="submitData"></up-button>
    </view>

<!--    渠道类型弹框 -->
    <u-picker :show="visible" :columns="channelTypeOptions" keyName="label" @confirm="selectChannelType"></u-picker>
  </view>
</template>
<script setup lang="ts">
import {ref, reactive} from "vue";
import { createChannel, editChannel, channelDetail } from '@/api_request/api'
import {matchDictionaryName, validateEmail, validateNumber} from "@/utils/utils";
import { entityOptions, channelType } from '@/utils/dictionary'
import { onLoad } from '@dcloudio/uni-app'
import { each } from 'loadsh'

const visible = ref<Boolean>(false)
const channelTypeOptions = reactive([channelType])
const formRef = ref<any>(null)
const form = ref<any>({})

const renderDicLabel = (arr, value) => {
  return matchDictionaryName(arr, value)
}
const selectEntity = (row) => {
  form.value.entity = row.value
}
const showChannelType = () => {
  console.log('jp======222222',)
  visible.value = true
}
const selectChannelType = (item) => {
  console.log('jp======iteml',item)
  const row = item.value[0]
  form.value.type = row.id
  form.value.type_text = row.label
  visible.value = false
}
const submitData = async () => {
  if(!form.value.type)return uni.$showMsg('请选择类型渠道')
  if(form.value.bank_account && !validateNumber(form.value.bank_account))return uni.$showMsg('请输入正确的银行账号')
  const params = {
    ...form.value
  }
  let res: any
  if(form.value.id){
    res = await editChannel(params)
  } else {
  //   新增
    res = await createChannel(params)
  }
  if(res.code === 200){
    uni.$showMsg('操作成功！')
    uni.navigateTo({url: `/subpkg/channel_list/index`})
    return
  }
  uni.$showMsg(res.message)
}
const getChannelInfo = (data) => {
  channelDetail(data).then(res => {
    console.log('jp=======渠道详情',res)
    const index = channelType.findIndex(item => item.value === res.data.type)
    form.value = {
      ...res.data,
      type_text: index !== -1 ? channelType[index].label : ''
    }
  })
}
onLoad((option) => {
  console.log('jp=======option',option)
  if(option?.id) {
    getChannelInfo({id: option.id})
  }
})

</script>
<style lang="scss" scoped>
  .create_channel{

    .view_form_item{
      border-bottom: 1px solid #F4F4F4;
    }
  }
</style>